<template>
	<view class="page">
		<view class="head-back">
			<view class="back" @click="onBack">
				<text></text>
			</view>
			<view class="title">
				<text>配资申请</text>
			</view>
			<!--view class="more-icon">
				<view class="icon-list">
					<text class="iconfont icon-fadajing"></text>
				</view>
			</view-->
		</view>
		<!-- 配资tab -->
		<view class="order-tab">
			<view class="tab" v-for="(item,index) in tabList" v-if="item.status == 1" @click="onOrderTab(item.id)" :key="index" :class="{'action':OrderType==item.id}">
				<text>{{item.name}}</text>
				<text class="line"></text>
			</view>
			
		</view>
		<!-- 订单列表 -->
		<view class="order-list">
			<!-- 通知 -->
			<view class="inform" v-if="OrderType==0 && !free_set[0]==''">
				<view class="inform-info">
					<view class="info">
						<text>固定{{free_set[0]}}倍杠杆，免息配资{{free_set[1]}}天，盈利的{{free_set[2]}}%返还给您！</text>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="input-info">
					<view class="info">
						<view class="more">请输入保证金金额</view>
						<input type="number" 
						v-model="form.freeze" 
						@input="onInput" 
						placeholder="保证金为100的倍数且小于20000000">
					</view>
					<view class="info">
						<view class="more">请选择操盘期限</view>
						<view class="form">
							<picker @change="bindTimeChange" :range="timeArray">
								<label v-if="index==null" class="normal">点击选择操盘期限</label>
								<label v-else>{{timeArray[index]+" "+dataName}}</label>
							</picker>
						</view>
					</view>
				</view>
				<!-- 选择倍数 -->
				<view class="wallet">
					<view class="more">
						<text>配资金额</text>
					</view>
					<view class="wallet-list" v-if="this.OrderType == 0">
						<view class="beishu-list" v-for="(item,index) in ratefree" 
						@click="onclick(index+1,free_set[0]*form.freeze,index)" :key="index"
						v-bind:class="{on:index==current}">
							<view class="bigMoney">
								<text v-if="form.freeze>0">{{free_set[0]*form.unitNumber+form.unit}}</text>
								<text v-else>配资金额</text>
							</view>
							<view class="give">
								<text>{{free_set[0]}}</text><text>倍</text>
							</view>
						</view>
					</view>
					<view class="wallet-list" v-else>
						<view class="beishu-list" v-for="(item,index) in rateCount" 
						@click="onclick(item,item*form.freeze,index)" :key="index"
						v-bind:class="{on:index==current}">
							<view class="bigMoney">
								<text v-if="form.freeze>0">{{item*form.unitNumber+form.unit}}</text>
								<text v-else>配资金额</text>
							</view>
							<view class="give">
								<text>{{item}}</text><text>倍</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 按钮 @click="form.freeze?$refs['GoodsCoupon'].show():''"-->
			<view class="btn-info">
				<view class="btn" 
				:style="form.freeze?'opacity:1':'opacity:0.4'" 
				@click="form.freeze?goNext():''">
					<text>下一步</text>
				</view>
			</view>
		<!-- 确认申请 -->
		<goods-coupon ref="GoodsCoupon"></goods-coupon>
		</view>
	</view>
</template>

<script>
	var _self,loginRes,action;
	import GoodsCoupon from '../../components/GoodsCoupon/GoodsCoupon.vue';
	export default {
		components: {
		  GoodsCoupon,
		},
		data() {
			return {
				account_money : '******',
				//time  : '',
				current: null,
				dataName : '',
				OrderType: '',
				// 表单
				timeArray:[],
				ratefree :['1'],
				rateCount:[],
				index: null,
				free_loss: {},
				free_set:  {},
				peiziJson: {},
				form:{
					type: '',//配资种类
					multiple:'',//倍数
					freeze: '',//保证金
					time: '',//时间
					bigMoney : '',//配资金额
				},
				applyJson:'',
				tabList:[
					{ id: 0, name: '免息操盘', status: 0 },
					{ id: 1, name: '按天操盘', status: 1 },
					{ id: 2, name: '按周操盘', status: 1 },
					{ id: 3, name: '按月操盘', status: 1 }
				],
			};
		},
		onLoad(params) {
			this.OrderType = params.type;
			_self = this;
			loginRes = this.checkLogin();
			if(!loginRes){return;}
			console.log(loginRes);
			if(this.OrderType == 0)action = 'free_m';
			if(this.OrderType == 1 || this.OrderType == '')action = 'day';
			if(this.OrderType == 2)action = 'week';
			if(this.OrderType == 3)action = 'month';
			this.applyFree(action,loginRes[2]);
		},
		methods:{
			changeNumber(){
				if(this.form.freeze.length==1){
					this.form.freeze=this.form.freeze.replace(/[^1-9]/g,'')
				}else{
					this.form.freeze=this.form.freeze.replace(/\D/g,'')
				}
			},
			calculate:function(number){
				if(number.toString().length >= 13){
					this.form.unitNumber = number/1000000000000;
					this.form.unit = '万亿';
				}else if(number.toString().length >= 9){
					this.form.unitNumber = number/100000000;
					this.form.unit = '亿';
				}else if(number.toString().length >= 4){
					this.form.unitNumber =  number/10000;
					this.form.unit = '万';
				}else{
					this.form.unitNumber =  number;
					this.form.unit = '元';
				}
			},
			async applySave(token,form){
				//uni.showLoading({'title':"加载中",icon:"none"});
				uni.request({
					url: this.apiServer+'/apicom/handle/applySave',
					header: {'content-type' : "application/x-www-form-urlencoded"},
					method: 'POST',
					timeout: 5000,
					data:{
						token: token,
						type: form.type,
						multiple: form.multiple,
						borrow_duration:form.time,
						deposit_money:form.freeze,
					},
					success: res => {
						//uni.hideLoading();
						if(res.data.status == 1){
							this.applyJson = res.data.data;
							this.$refs['GoodsCoupon'].show(token,form);
						}else{
							uni.showToast({title:res.data.message,icon:"none"});
							return;
						}
					},
					complete:function(){
					    uni.stopPullDownRefresh();
					},
					fail:function(e){
						uni.showToast({title:"配资加载失败!",icon:"none"});
					}
				});
			},
			async applyFree(action, token){
				//uni.showLoading({'title':"加载中",icon:"none"});
				uni.request({
					url: this.apiServer+'/apicom/stock/'+action,
					header: {'content-type' : "application/x-www-form-urlencoded"},
					method: 'POST',
					timeout: 5000,
					data:{
						token: token
					},
					success: res => {
						//uni.hideLoading();
						if(res.data.status == 1){
							if(this.OrderType == 0){
								this.peiziJson = res.data.data;
								this.account_money = res.data.data.account_money;
								this.free_loss = res.data.data.free_loss;
								this.free_set  = res.data.data.free_set;
								let string = res.data.data.free_set[1];
								this.timeArray = string.split(' ');//把字符串转换成数组
								this.dataName = '天';
								this.form.type = 5;
								console.log(this.peiziJson);
							}
							if(this.OrderType == 1){
								this.account_money = res.data.data.account_money;
								this.peiziJson = res.data.data;
								this.timeArray = res.data.data.day_use_time;
								this.rateCount = res.data.data.day_rate_a;
								this.dataName = '天';
								this.form.type = 1;
								console.log(this.peiziJson);
							}
							if(this.OrderType == 2){
								this.account_money = res.data.data.account_money;
								this.peiziJson = res.data.data;
								this.timeArray = res.data.data.week_use_time;
								this.rateCount = res.data.data.week_rate_a;
								this.dataName = '周';
								this.form.type = 2;
								console.log(this.peiziJson);
							}
							if(this.OrderType == 3){
								this.account_money = res.data.data.account_money;
								this.peiziJson = res.data.data;
								this.timeArray = res.data.data.month_use_time;
								this.rateCount = res.data.data.month_rate_a;
								this.dataName = '月';
								this.form.type = 3;
								console.log(this.peiziJson);
							}
						}
						uni.hideLoading();
					},
					complete:function(){
					    uni.stopPullDownRefresh();
					},
					fail:function(e){
						uni.showToast({title:"配资加载失败!",icon:"none"});
					}
				});
			},
			UpNumber(e) {
				e.target.value = e.target.value.replace(/[^\d]/g,"");
			},
			onInput(e) {
				this.form.freeze = e.target.value;//监听获取输入框改变值
				if (String(this.form.freeze).indexOf('.') > 0) this.form.freeze = '';
				this.$nextTick(() => { //这里
					this.form.freeze = String(this.form.freeze).replace(/\D/g, '');
				});
				if(!this.form.freeze.replace(/[^a-zA-Z]/)){
					uni.showToast({title:"只能输入纯数字!",icon:"none"});
					this.form.freeze = this.form.freeze.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\·~！@#￥%……&*()——\-+={}|《》？：“”【】、；‘'，。、]/g,"");
					return;
				}
				this.form.freeze=parseInt(this.form.freeze.replace(/[^\d]/g,''));
				var number = this.form.freeze;
				if(number.toString().length >= 13){
					this.form.unitNumber = number/1000000000000;
					this.form.unit = '万亿';
				}else if(number.toString().length >= 9){
					this.form.unitNumber = number/100000000;
					this.form.unit = '亿';
				}else if(number.toString().length >= 5){
					this.form.unitNumber =  number/10000;
					this.form.unit = '万';
				}else{
					this.form.unitNumber =  number;
					this.form.unit = '元';
				}
				//console.log(this.money);
			},
			bindTimeChange: function(e) {//改变的事件名
				//console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
				this.index = e.target.value//将数组改变索引赋给定义的index变量
				this.form.time  = this.timeArray[this.index]//将array【改变索引】的值赋给定义的picker变量
			    //console.log("选择为：",this.time)//输出获取的值
			},
			onclick:function(multiple,e,index){
				this.current = index;
				this.form.bigMoney = e;
				this.form.multiple = multiple;
				//console.log(index);
				
			},
			goNext:function(){
				if(!this.form.freeze){
					uni.showToast({title:"请填写保证金",icon:"none"});
					return;
				}
				if(!this.form.time){
					uni.showToast({title:"请选择操盘期限",icon:"none"});
					return;
				}
				if(!this.form.bigMoney){
					uni.showToast({title:"请选择配资金额",icon:"none"});
					return;
				}
				//console.log('保证金：'+this.form.freeze);
				//console.log('时间 ：'+this.form.time);
				//console.log('配资金额 ：'+this.form.bigMoney);
				//console.log('提交项：'+ JSON.stringify(this.form));
				//console.log('申请项：'+ JSON.stringify(this.peiziJson));
				this.applySave(loginRes[2],this.form);
			},
			/* 返回点击*/
			onBack(){
				uni.navigateBack();
			},
			/**
			 * 配资tab点击
			 */
			onOrderTab(type){
				this.OrderType = type;
				
				uni.redirectTo({
					url: '/pages/Peizi/Peizi?type=' + type,
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	@import 'Peizi.scss';
</style>
